<template>
    <div>
        <!-- 导航 -->
        <header class="w">
            <div class="logo">
            <router-link to="/" >
                <img src="@/assets/img/em.png" alt="">
            </router-link>
            </div>
            <div class="wel">
                你好，欢迎登录！
            </div>
        </header>
        <div class="login stamp">
            <div class="w">
                <div class="login-card">
                    <ul>
                        <li :class="loginWay?'active':''"  @click="loginWay=true">手机登录</li>
                        <li :class="!loginWay?'active':''" @click="loginWay=false">账号登录</li>
                    </ul>

                    <form action="" class="form2" v-if="loginWay">
                        <div class="border">
                            <input type="text" placeholder="输入您的手机号" class="iphone" v-model="phoneNumber">
                        </div>
                        <div class="yamborder">
                            <input type="text" placeholder="验证码" class="yam" name="yam" v-model="mobileCode">
                            <span @click.prevent="getVerifyCode" v-show="!computedTime">获取验证码</span>
                            <span  @click.prevent v-show="computedTime">已发送({{computedTime}}s)</span>
                        </div>
            
                        <!-- <i><input type="checkbox" name="" id="" class="checkbox">我已阅读并同意<span>（医竟采注册和使用协议）</span></i> -->
                        <button type="button" @click="mobileLogin">登录</button>
                    </form>
                    <form action="" class="form1" v-else >
                        <input type="text" placeholder="输入您的账号" class="iphone"  v-model="userAccount">
                        
                        <input type="password" placeholder="请输入您的密码" class="password" v-model="passWord">
                        <!-- <i><input type="checkbox" name="" id="" class="checkbox">记住密码</i>
                        <em>忘记密码</em> -->

                        <button type="button" @click="mobileLogin">登录</button>
                    </form>
                </div>
            </div>
        </div>


        <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" @on-close="closeDialog">
         <div slot="main">{{dailogText}}</div>
         <div slot="close">我知道了</div>
     </Pdailog>

        <Pfoot />
    </div>

</template>
<script>
import Pfoot from '@/components/Pfoot.vue'
import Pdailog from '@/components/Pdailog.vue'

export default {
  data(){
    return{
        loginWay: true, //登录方式，默认短信登录
        phoneNumber:null,
        
        mobileCode: null, //短信验证码
        computedTime:0,// 倒计时
        userInfo: null, //获取到的用户信息
        userAccount: null, //用户名
        passWord: null, //密码

        imgCode:null,//图片验证码

        dailogShow:false,
        dailogText:''
     }
  },
  created(){
    // let userInfo = this.getUserInfo();
    // console.log(userInfo.user_token)
    
  },
  mounted(){

            
  },
  components: {
    Pfoot,
    Pdailog
  },
  computed: {
            //判断手机号码
            rightPhoneNumber: function (){
                return /^1\d{10}$/gi.test(this.phoneNumber)
            }
  },
  methods:{
    test(){
        this.$axios.get('/index/indexdata').then((response)=>{
                console.log(response)
            })
    },  
    getImgCode(){
        this.imgCode  = this.api_url+"/getImgCode?rnd=" + Math.random();
    },
    //发送短信验证码
    async getVerifyCode(){
        if (this.rightPhoneNumber) {
            this.computedTime = 60;
            this.timer = setInterval(() => {
                this.computedTime --;
                if (this.computedTime == 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
        
                //发送短信验证码
                await this.$axios.get('/login/sendSmsCode',{
                    params:{
                       phone:this.phoneNumber  
                    }
                }).then((res)=>{
                    if(res.code != 200){
                        this.dailogShow = true,
                        this.dailogText = res.msg
                        return
                    }
                })
        
           }else{
                this.dailogShow = true,
                this.dailogText = '请输入正确手机号'
            return
            
        }
    },
    //登录
    async mobileLogin(){
        if (this.loginWay) {
            if (!this.rightPhoneNumber) {
                this.dailogShow = true,
                this.dailogText = '手机号码不正确!'
                return
            }else if(!(/^\d{4}$/gi.test(this.mobileCode))){
                this.dailogShow = true,
                this.dailogText = '短信验证码不正确!'
            
                return
            }
            //手机号登录
          await this.$axios.get('/login/phoneLogin',{
                params:{
                   user_phone:this.phoneNumber, 
                   code:this.mobileCode,   
                }
            }).then((res)=>{
                if(res.code != 200){
                    this.dailogShow = true,
                    this.dailogText = res.msg
                    return
                }else{
                    this.userInfo = res.data
                    localStorage.setItem('userInfo',JSON.stringify(this.userInfo))
                    this.$router.go(-1);

                }
            })

        //账号密码登录   
        }else{
            if (!this.userAccount) {
                this.dailogShow = true,
                this.dailogText = '请输入手机号/邮箱/用户名!'
                
                return
                
            }else if(!this.passWord){
                this.dailogShow = true,
                this.dailogText = '请输入密码!'
                
                return
            
            }
            // else if(!this.codeNumber){
            //     this.showAlert = true;
            //     this.alertText = '请输入验证码';
            //     return
            // }
          await this.$axios.get('/login/userLogin',{
                params:{
                   user_name:this.userAccount, 
                   user_pass:this.passWord,   
                }
            }).then((res)=>{
                if(res.code != 200){
                    this.dailogShow = true,
                    this.dailogText = res.msg
                    return
                
                }else{
                    this.userInfo = res.data
                    localStorage.setItem('userInfo',JSON.stringify(this.userInfo))
                    
                    if(this.$route.query.redirect){
                         this.$router.replace({path:this.$route.query.redirect})
                    }else{
                         this.$router.replace({path:'/'})
                    }

                }
            })
            
        }
        
    },
    //改变登录方式
    changeLoginWay(){
        this.loginWay= !this.loginWay
    },
    //关闭弹窗
    closeDialog(){
    this.dailogShow=false;
    },

  }

}
</script>
<style>
.topasslogin{
    float:right;
    font-size: .36rem;
    color: #3b95e9;
    margin: .2rem;
}

</style>
